<template>
	<view class="content">
		<view class="g-header"></view>
		<view class="innerPre"></view>
		<view class="inner">
			<view class="wilSearch">
				<view class="wilSearch1"></view>
				<picker mode="date" :value="info.chooseListTop" :start="info.chooseDateBegin" @change="bindDateChange"><view class="wilSearch2">2022年4月1日</view></picker>
				<view class="wilSearch3">--</view>
				<view class="wilSearch4"></view>

				<picker mode="date" :value="info.chooseListTop" :start="info.chooseDateBegin" @change="bindDateChange"><view class="wilSearch5">2022年4月18日</view></picker>
			</view>

			<view class="vilTable">
				<view class="wilTableTh">
					<view class="wtd1">序号</view>
					<view class="wtd2">时间</view>
					<view class="wtd3">归还水舱ID</view>
					<view class="wtd4">取出水舱ID</view>
				</view>
				<view class="vilTableTb" v-for="(n, i) in list" :key="i" @click="showDetail(n, i)">
					<view class="wtd1">1</view>
					<view class="wtd2">2022-05-15</view>
					<view class="wtd3">862542</view>
					<view class="wtd4">862542</view>
				</view>
			</view>
		</view>
		<view class="innerNext"></view>
	</view>
</template>

<script>
import * as util from '@/common/util';
import _ from 'lodash';

export default {
	components: {},
	data() {
		return {
			title: 'Hello',
			list: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
			info: {
				chooseListTop: '',
				chooseDateBegin: ''
			}
		};
	},
	onLoad() {
		this.id = this.$Route.query.id;
		console.log('this.id', this.id);
	},
	onShow() {},
	mounted() {},
	onReady() {},
	methods: {
		showDetail() {
			util.linkTo('/pages/index/waterIntakeLiDetail?id=111');
		},
		bindDateChange() {}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f7f9fb;
}

.innerPre {
}

.inner {
}

.innerNext {
}

.wilSearch {
	width: 750px;
	height: 112px;
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
	display: flex;
	align-items: center;

	font-size: 28px;
	font-weight: normal;
	color: #262626;
	padding: 32px;
	.wilSearch1 {
	}
	.wilSearch2 {
	}
	.wilSearch3 {
	}
	.wilSearch4 {
	}
	.wilSearch5 {
	}
}

.vilTable {
	.wilTableTh {
		display: flex;
		align-items: center;
		font-size: 28px;
		font-weight: 500;
		line-height: 48px;
		background: rgba(0, 0, 0, 0.02);
		.wtd1 {
			flex: 0 0 15%;
			padding: 20px;
		}
		.wtd2 {
			flex: 0 0 35%;
			padding: 20px;
		}
		.wtd3 {
			flex: 0 0 25%;
			padding: 20px;
		}
		.wtd4 {
			flex: 0 0 25%;
			padding: 20px;
		}
	}
	.vilTableTb {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #00000008;

		.wtd1 {
			flex: 0 0 15%;
			padding: 20px;
		}
		.wtd2 {
			flex: 0 0 35%;
			padding: 20px;
		}
		.wtd3 {
			flex: 0 0 25%;
			padding: 20px;
			color: #177fff;
		}
		.wtd4 {
			flex: 0 0 25%;
			padding: 20px;
			color: #1ac467;
		}
	}
}
</style>
